<template>
	<view class="main animated fadeIn faster">
		<view class="content position-fixed z-index-99" :style="{'paddingTop':$store.state.statusBarHeight+'px','top':'0'}">
			<view class="title">
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30"></text></view>
				<text>{{title}}</text>
			</view>
			<view class="bg-fff pb-2 tab" style="border-bottom: 1px solid rgba(204, 204, 204, .2);">
				<view class="d-flex d-flex-middle mt-2 ml-3">
					<view @click="changeTab(dex)" style="width: 150rpx;" class="text-center" :class="currentTab === dex? 'currentTabSty' : ''" v-for="(tab, dex) in TabList" :key="tab">{{tab}}</view>
				</view>
				<view class="rounded15" :style="[{transform: 'translate('+DistanceX+'rpx)'}]" style="margin-left: 90rpx; width: 35rpx; height: 6rpx; background: #6ed2f4; margin-top: 3px; transition: transform 0.3s ease;"></view>
			</view>
		</view>
		<view class="bg-fff section w-100 d-flex d-flex-end" :style="{paddingTop: PaddingTop +'px'}">
			<view class="d-flex-btn px-2 py-1 mr-3 my-3 rounded40 bg-f8" style="width: 190rpx;" @click="openDatePopup">
				<view style="margin-right: 3px;">{{date}}</view>
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E4%B8%8B%E6%8B%89%E7%AE%AD%E5%A4%B4.png" style="width: 30rpx; height: 30rpx;"></image>
			</view>
		</view>
		<swiper class="bg-fff swiper" :current="currentTab" duration="300" @animationfinish="onAnimationfinish" @transition="onSwiperTransition" :style="[{minHeight: 'calc(100vh - ' + SwiperMinHeight + 'px)'},{height: swiperHeight + 'px'}]">
			<swiper-item>
				<view class="swiper-item0">
					<view class="d-flex d-flex-middle bg-fff pb-2" v-for="(item,index) in giftList" :key="index">
						<image class="rounded mx-3" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png" style="width: 85rpx; height: 85rpx;"></image>
						<view class="d-flex d-flex-between mt-2 pb-2" style="flex: 1; flex: 1; border-bottom: 1px solid rgba(204, 204, 204, .4);">
							<view class="d-flex-column">
								<view class="font25">{{item.remark}}</view>
								<view class="font28" style="color: #696969;">{{item.changeTime}}</view>
							</view>
							<view class="mr-3 font-bold">X{{item.changeAmount}}</view>
						</view>
					</view>
					<view v-if="giftList.length==0">
						<view  style="width: 100%;"  >
							<text class="position-relative d-flex font-bold font30" style="  justify-content: center;align-items: center;top: 405rpx;">您暂时还没有收入记录</text>
							<image class="position-relative" style="top: -80rpx;left: 58rpx;width: 80%;" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/xiaoda.png"></image>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item1">
					<view  class="d-flex d-flex-middle bg-fff pb-2" v-for="(item,index) in withdrawalList" :key="index">
						<image class="rounded mx-3" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E9%9B%B6%E9%92%B1.png" style="width: 85rpx; height: 85rpx;"></image>
						<view class="d-flex d-flex-between mt-2 pb-2"  style="flex: 1; flex: 1; border-bottom: 1px solid rgba(204, 204, 204, .4);">
							<view class="d-flex-column">
								<view class="font30">{{item.remark}}-到支付宝<br>{{item.thirdAccount.substr(0,3) + "****" +item.thirdAccount.substr(7)}}</view>
								<view class="font28" style="color: #696969;">{{item.gmtCreated}}</view>
							</view>
							<view class="mr-3 font-bold">{{item.amount}}</view>
						</view>
					</view>
					<view v-if="withdrawalList.length==0">
						<view  style="width: 100%;"  >
							<text class="position-relative d-flex font-bold font30" style="  justify-content: center;align-items: center;top: 405rpx;">您暂时还没有提现记录</text>
							<image class="position-relative" style="top: -80rpx;left: 58rpx;width: 80%;" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/xiaoda.png"></image>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<uni-popup ref="DatePopup" background-color="#fff" border-radius="16px 16px 16px 16px" style="z-index: 999;">
			<view class="d-flex d-flex-between pb-6 mt-6 px-6">
				<view style="color: #9E9D9D;;" @click="ColseDatePopup">取消</view>
				<view style="color: #66CCCC;;" @click="dateconfirm">确认</view>
			</view>
			<view class="popup-content px-5">
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view" style="height: 400rpx; width: 100%;">
					<picker-view-column style="text-align: center; line-height: 50px;">
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column style="text-align: center; line-height: 50px;">
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	import { PayApi } from '../../http/PayApi';
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			
			for (let i = 1990; i <= date.getFullYear(); i++) {
					years.push(i)
			}
			
			for (let i = 1; i <= 12; i++) {
			    months.push(i)
			}
			
			return {
				title: "资金明细",
				DistanceX: 0,
				currentTab: 0,
				swiperHeight:0,
				SwiperMinHeight: 450,
				PaddingTop: 120,
				TabList:['收入明细','提现明细'],
				visible: true,
				value: [9999, month - 1],
				field: null,
				years,
				year,
				months,
				month,
				date: null,
				param: {//提现参数
					pageIndex: 1,
					pageSize: 10,
					uid: this.$store.state.user.uid,
					type: 1,
					state: 2,
					createTimeAfter: null,
					createTimeBefore: null,
					changeType: 1
				},
				giftList:[],
				isgiftLast:false,
				params:{
					pageIndex:1,
					pageSize:10,
					resourceTypeList:2,
					changeType:1,
					changeTimeAfter:null,
					changeTimeBefore:null
				},
				isLast:false,
				withdrawalList:[],
				indicatorStyle: `height: 50px;`
			}
		},
		onLoad(opt) {
			this.date = this.year + '年' + this.month + '月'
			if(this.month==12){
				this.param.createTimeAfter=`${this.year}-${String(this.month).padStart(2, '0')}-01 00:00:00`;
				 this.param.createTimeBefore = `${this.year+1}-01-01 00:00:00`;
			}else{
			this.param.createTimeAfter=`${this.year}-${String(this.month).padStart(2, '0')}-01 00:00:00`;
			 this.param.createTimeBefore = `${this.year}-${String(this.month + 1).padStart(2, '0')}-01 00:00:00`;	
			}
			
			this.params.changeTimeAfter=this.param.createTimeAfter;
			this.params.changeTimeBefore=this.param.createTimeBefore;
			this.changeTab(opt.type)
			this.setPaddingTop()
			this.setSwiperMinHeight()
		},
		onReachBottom() {
			
			if(this.currentTab == 1) {
				
				if(this.isLast){
					
					 uni.showToast({
					                title: '没有更多数据了',
					                icon: 'none'
					            })
					return
				}else{
					
					this.param.pageIndex++
					this.getwithdrawal();
					 this.setSwiperHeight();
					}
			
				
			}else{
				if(this.isgiftLast){
					uni.showToast({
					                title: '没有更多数据了',
					                icon: 'none'
					            })
					return
				}else{
					this.params.pageIndex++
					this.getGifts();
					this.setSwiperHeight();
				}
			}
			
		},
		methods: {
			
			async getwithdrawal(){
				
				let res=await PayApi.getWithdrawal(this.param);
				res.records.forEach(i=>{
					this.withdrawalList.push(i)
				})
				if(res.records.length!=this.param.pageSize){
					
					this.isLast=true;
				}
				  setTimeout(() => {
				            this.setSwiperHeight();
				        }, 100)
				
				
			},
			
			async getGifts(){
				let res=await PayApi.getBill(this.params);
				if(res.page.records){
					res.page.records.forEach(i=>{
						this.giftList.push(i)
					})
				}
				if(res.page.total!=this.param.pageSize){
					this.isgiftLast=true;
				}
				setTimeout(() => {
					this.setSwiperHeight();
				}, 100)
			},
			
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 切换tab栏
			changeTab(dex) {
				this.date = this.year + '年' + this.month + '月'
				if(dex === this.currentTab) {
					return
				}
				if(dex == 0) {
					this.withdrawalList = []
					this.param.changeType = 1
				} else {	
					this.giftList = []
					this.param.changeType = -1
				}
				if(this.month==12){
					this.param.createTimeAfter=`${this.year}-${String(this.month).padStart(2, '0')}-01 00:00:00`;
					 this.param.createTimeBefore = `${this.year+1}-01-01 00:00:00`;
				}else{
				this.param.createTimeAfter=`${this.year}-${String(this.month).padStart(2, '0')}-01 00:00:00`;
				 this.param.createTimeBefore = `${this.year}-${String(this.month + 1).padStart(2, '0')}-01 00:00:00`;	
				}
				if(dex==1&&this.withdrawalList.length==0){
					this.getwithdrawal();
				}
				if(dex==0&&this.giftList.length==0){
					this.params.changeTimeAfter=this.param.createTimeAfter;
					this.params.changeTimeBefore=this.param.createTimeBefore;
					this.getGifts();
				}
				this.currentTab = dex
				this.DistanceX = this.currentTab * 150
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			// swiper动画执行完后的动作
			onAnimationfinish(event) {
				this.currentTab = event.detail.current
				this.DistanceX = this.currentTab * 150
				
			},
			  onSwiperTransition() {
			        this.setSwiperHeight();
			    },
			// 打开日期选择器
			openDatePopup() {
				this.$refs.DatePopup.open('bottom')
			},
			// 关闭日期选择器
			ColseDatePopup() {
				this.$refs.DatePopup.close()
			},
			bindChange(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
			},
			dateconfirm() {
				
				this.date = this.year + '年' + this.month + '月'
				if(this.month==12){
					this.param.createTimeAfter=`${this.year}-${String(this.month).padStart(2, '0')}-01 00:00:00`;
					 this.param.createTimeBefore = `${this.year+1}-01-01 00:00:00`;
				}else{
				this.param.createTimeAfter=`${this.year}-${String(this.month).padStart(2, '0')}-01 00:00:00`;
				 this.param.createTimeBefore = `${this.year}-${String(this.month + 1).padStart(2, '0')}-01 00:00:00`;	
				}
				this.param.pageIndex=1;
				this.withdrawalList=[];
				if(this.currentTab==1){
					this.getwithdrawal();
				}else{
					this.params.changeTimeAfter=this.param.createTimeAfter;
					this.params.changeTimeBefore=this.param.createTimeBefore;
					this.params.pageIndex=1;
					this.giftList=[];
					
					
					
					this.getGifts();
				}
				
				console.log('选择了日期',this.date);
				this.ColseDatePopup()
			},
			// 设置上边距
			setPaddingTop() {
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this)
					query.select('.content').boundingClientRect(data => {
						this.PaddingTop = data.height + data.top
					}).exec()
				}, 300)
			},
			 setSwiperHeight() {
			         this.$nextTick(() => {
			             const query = uni.createSelectorQuery().in(this)
			             query.select('.swiper-item'+this.currentTab).boundingClientRect(data => {
			             
			                   this.swiperHeight=data.height
			                     
			                 
			             }).exec()
			         })
			     },
			setSwiperMinHeight() {
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this)
					query.select('.section').boundingClientRect(data => {
						
						this.SwiperMinHeight = data.height
					}).exec()
				}, 300)
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #f8f8f8;
	overflow: hidden;
	.currentTabSty {
		font-weight: bold;
	}
	.content {
		width: 100%;
		background-color: #fff !important;
		.title {
			display: flex;
			align-items: center;
			height: 80rpx;
			padding-right: 47rpx;
			text {
				flex: 1;
				font-size: 32rpx;
				text-align: center;
				font-weight: normal;
			}
		}
	}
	.z-index-99 {
		z-index: 99;
	}
}
</style>